@media (max-width: 1300px) { .introduce { padding: 40px !important; }
  .introduce .box { width: 30% !important; }
  .login .item { padding: 20px !important; margin-top: 0px !important; margin-top: 20px !important; }
  .login .item h4 { font-size: 14px !important; }
  .login .item h4::after { bottom: -50% !important; }
  .login .item p { font-size: 14px !important; } }

@media (max-width: 996px) { .banner .bn-bottom { margin-top: 10px !important; }
  .introduce { padding: 25px !important; }
  .introduce .box { margin-top: 20px !important; width: 100% !important; }
  .introduce .box h4 { line-height: 35px !important; font-size: 14px !important; }
  .introduce .box p { line-height: 35px !important; font-size: 14px !important; }
  .login .item div { margin-top: 10px !important; }
  .login .item div input { height: 40px !important; border-radius: 8px !important; }
  .login .item button { height: 40px !important; font-size: 16px !important; }
  .login .item a { font-size: 12px !important; } }

* { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }

.banner .bn-top { width: 100%; }

.banner .bn-top img { width: 100%; }

.banner .bn-bottom { widows: 100%; margin-top: 50px; }

.banner .bn-bottom img { width: 100%; }

.introduce { padding: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; }

.introduce .box { text-align: center; width: 400px; }

.introduce .box img { width: 100%; }

.introduce .box h4 { font-size: 19px; line-height: 50px; padding-bottom: 20px; }

.introduce .box p { color: #afacac; font-size: 18px; letter-spacing: 1px; word-spacing: 5px; line-height: 30px; }

.login { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; margin-top: 20px; padding: 20px; background-image: linear-gradient(130deg, white 50%, red 50%); }

.login .item { margin-top: 80px; padding: 70px; border-radius: 10px; background-color: white; border: 1px solid #eaeaea; -webkit-box-shadow: 0 0 15px #d4d4d4; box-shadow: 0 0 15px #d4d4d4; }

.login .item h4 { font-size: 20px; color: #707070; position: relative; }

.login .item h4::after { content: ""; display: inline-block; width: 100%; height: 1px; background-color: #8f8f8f; position: absolute; bottom: -100%; left: 0%; }

.login .item p { font-size: 21px; color: #aca9a9; line-height: 30px; }

.login .item a { font-size: 15px; color: #aca9a9; }

.login .item div { margin-top: 35px; }

.login .item div input { width: 100%; height: 68px; padding: 0 10px; outline: 0; border: 1px solid #aca9a9; border-radius: 5px; }

.login .item div:last-of-type { display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 15px; }

.login .item div:last-of-type div { margin: 0; }

.login .item div:last-of-type input { width: 20px; height: 20px; }

.login .item button { background-color: #d50112; border-radius: 5px; color: white; border: 0px; width: 100%; height: 68px; font-size: 24px; margin-top: 25px; }

.pop { height: 100vh; width: 100vw; position: fixed; top: 0%; left: 0%; opacity: 0; background-color: rgba(0, 0, 0, 0.6); display: none; -webkit-transition: all 1s; transition: all 1s; }

.pop .title { width: 80vw; height: 80vh; padding: 10px 6px 8px 10px; background-color: white; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.pop .title .section { width: 100%; height: 92%; overflow-y: scroll; }

.pop .title .close { width: 100%; height: 8%; padding: 15px 20px; text-align: right; }

.pop .title .close .btn { background: #e4e1e1; border-radius: 6px; padding: 5px 30px; font-size: 16px; border: 0; }

.warn { border: 1px solid red !important; }

.active { opacity: 1; }
